<template>
  <swiper :options="swiperOption" ref="swiper">
    <!-- 下拉刷新开始 -->
    <div class="pull-down" v-if="pullDownShow">
      <me-loading
        ref="pullDown"
        :inline="false"/>
    </div>
    <!-- 下拉刷新结束 -->
    <swiper-slide>
      <slot></slot>
    </swiper-slide>
    <!-- 下拉加载开始 -->
    <div class="pull-up" v-if="pullUpShow">
      <me-loading
        ref="pullUp"
        :ifImagShow="ifImagShow"/>
    </div>
    <!-- 下拉加载结束 -->
    <div class="swiper-scrollbar" slot="scrollbar" v-if="scrollbar"></div>
  </swiper>
</template>
<script>
import meLoading from './me-loading.vue'
export default {
  name: 'meScroll',
  data () {
    return {
      ifImagShow: true,
      loadingText: '',
      pulling: false // 是否处于正在加载状态
    }
  },
  watch: {
    data (value) { // 监听父组件传来的数据，一旦改变则滚更新滚动条
      this.update()
    }
  },
  props: {
    data: {
      type: [Array, Object]
    },
    pullUpShow: { // 上拉加载更多是否显示
      type: Boolean,
      default: false
    },
    pullDownShow: { // 下拉刷新是否显示
      type: Boolean,
      default: false
    },
    loop: { // 轮播图首尾是否衔接
      type: Boolean,
      default: false
    },
    direction: { // 滚动条方向
      type: String,
      validator (value) {
        return ['horizontal', 'vertical'].indexOf(value) > -1
      },
      default: 'vertical'
    },
    autoplay: {
      type: Number,
      default: 0
    },
    speed: {
      type: Number,
      default: 300
    },
    scrollbar: { // 是否有滚动条
      type: Boolean,
      default: true
    }
  },
  components: {
    meLoading
  },
  created () {
    this.swiperOption = {
      loop: this.loop,
      direction: this.direction,
      autoplay: this.autoplay,
      speed: this.speed,
      slidesPerView: 'auto',
      freeMode: true,
      setWrapperSize: true,
      scrollbar: {
        el: this.scrollbar ? '.swiper-scrollbar' : null,
        hide: true
      },
      on: {
        sliderMove: this.scroll,
        touchEnd: this.touchEnd,
        transitionEnd: this.scrollEnd // 滑动时监听scrollEnd
      }
    }
  },
  methods: {
    scrollToTop (speed, runCallbacks) { // 回到顶部
      this.$refs.swiper.swiper.slideTo(0, speed, runCallbacks)
    },
    update () { // 更新滚动条
      this.$nextTick(() => {
        this.$refs.swiper.swiper.update()
      })
    },
    scroll () { // 拖拽
      const swiper = this.$refs.swiper.swiper // swiper实例
      this.$emit('scroll', swiper, swiper.translate) // 拖动时向父组件传递拖动的坐标
      if (swiper.translate > 0) { // 下拉
        if (!this.pullDownShow) { // 若下拉加载这个功能不存在直接返回
          return
        }
        if (swiper.translate < 50) { // 若下拉距离不足50px，则显示下拉刷新字样
          this.$refs.pullDown.setText('下拉刷新')
        } else { // 若下拉距离大于50px，则显示松手刷新字样
          this.$refs.pullDown.setText('松手刷新')
        }
      } else if (swiper.translate < 0) { // 上拉
        if (!this.pullUpShow) { // 若上拉加载标签不存在直接返回
          return
        }
      }
    },
    touchEnd () { // 松手
      const swiper = this.$refs.swiper.swiper // swiper实例
      if (swiper.translate > 50) { // 若松手时下拉距离超过50，则向父组件发送刷新事件
        if (!this.pullDownShow) { // 若下拉加载标签不存在直接返回
          return
        }
        this.$refs.pullDown.setText('正在刷新中')
        swiper.allowTouchMove = false// 不允许触摸
        swiper.setTransition(swiper.params.speed)
        swiper.setTranslate(50)
        console.log('松手定住',swiper.translate)
        swiper.params.virtualTranslate = true// 不允许回弹
        this.pulling = true
        this.$emit('pullDown', this.pullDownEnd) // 向父组件传递下拉事件，传递一个下拉事件结束的函数
      }
      if (-swiper.translate - (parseInt(swiper.$wrapperEl.css('height')) - swiper.height) > 30) { // 上拉，内容区底部向上超出了swiper-container 30px
        this.$refs.pullUp.setText('正在加载中')
        swiper.allowTouchMove = false// 不允许触摸
        swiper.setTransition(swiper.params.speed)
        swiper.setTranslate(-30 - parseInt(swiper.$wrapperEl.css('height')) + swiper.height)
        swiper.params.virtualTranslate = true// 不允许回弹
        this.$emit('pullUp', this.pullUpEnd) // 向父组件传递下拉事件，传递一个下拉事件结束的函数
      }
    },
    scrollEnd () { // 停止滑动以后
      // this.pulling = false
      console.log('停止滑动啦', this.$refs.swiper.swiper.translate)
      const swiper = this.$refs.swiper.swiper // swiper实例
      // console.log('scrollEnd', swiper.translate)
      this.$emit('scrollEnd', swiper, swiper.translate, this.pulling) // 滑动结束时向父组件传递滑动结束时的坐标
      if (!this.pullUpShow) { // 若没有上拉加载组件则直接返回
        return
      }
    },
    pullDownEnd () { // 下拉结束
      // console.log('pullupend')
      const swiper = this.$refs.swiper.swiper
      this.$refs.pullDown.setText('刷新完成')
      swiper.allowTouchMove = true// 允许触摸
      swiper.params.virtualTranslate = false// 允许回弹
      swiper.setTransition(swiper.params.speed)
      // console.log('回到顶部0',swiper.translate)  
      swiper.setTranslate(0) // 回到滚动条顶部
      // console.log('回到顶部1',swiper.translate)
      this.pulling = false
      this.$emit('pull-down-transition-end')
    },
    pullUpEnd () { // 上拉结束
      const swiper = this.$refs.swiper.swiper
      swiper.allowTouchMove = true// 允许触摸
      swiper.params.virtualTranslate = false// 允许回弹
      this.pulling = false
    },
    noMoreData (info) { // 已经加载全部内容，改变load组件文字内容为"没有更多内容啦"
      if (this.$refs.pullUp) {
        this.$refs.pullUp.setText(info)
      }
    },
    hideImage () { // 不显示加载的动态图片
      this.ifImagShow = false
    }
  }
}
</script>
<style lang="stylus" scoped>
.swiper-container
  width 100%
  height 100%
  overflow hidden
  .swiper-slide
    height auto
.pull-down,.pull-up
  display flex
  justify-content center
  align-items center
  position absolute
  left 0
  width 100%
.pull-down
  bottom 100%
  margin-bottom 10px
.pull-up
  top 100%
  margin-top 10px
</style>
